<template>
    <div>
        <div class="my-header">
            <div class="back-wrap">
                <span class="iconfont idon-left" @click="$router.push('/ContactPerson')">&lt;</span>
            </div>
            <div>
                <span>{{ zhi.userNickname }}</span>
            </div>
        </div>
        <div class="scroll-wrap scroll-wrap-bottom" ref="scrollContainer">
            <ul
                style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, 0px) scale(1) translateZ(0px)">
                <div class="chat-item">
                    <span class="time">昨天 16:18</span>
                </div>
                <div class="chat-item" v-for="(item, index) in arrlist1" :key="index">
                    <div class="right" v-if="item.fromId == uid">
                        <div class="content">
                            {{ item.privateLetterContent }}
                        </div>
                        <img src="http://43.138.15.137:3000/assets/avatar/c829d1f6-627c-4a03-9b61-88dd4bf5a75e.png" alt=""
                            width="40" height="40" class="avatar" />
                    </div>
                    <div class="leffft" v-if="item.fromId == zhi.userId">
                        <img :src="`http://43.138.15.137:3000${zhi.userAvatar}`" alt="" width="40" height="40"
                            class="avatar" />
                        <div class="content">
                            {{ item.privateLetterContent }}
                        </div>
                    </div>
                </div>
            </ul>
        </div>
        <div class="input-bar">
            <input type="text" placeholder="发送消息..." class="input" v-model="xinxilai" />
            <span class="iconfont icon-at"></span>
            <span class="iconfont icon-check" @click="fachu()">√</span>
        </div>
    </div>          
</template>
<script setup>
import { onMounted, onUpdated, ref } from 'vue'
import { useRoute } from 'vue-router'
import { inject } from 'vue'
import { getPrivateLetter, privateLetter } from '../apis/home.js'
const route = useRoute()
const socket = inject("socket"); // 注入到全局
let uid = localStorage.getItem('uid')
socket.emit('login', uid)
let YOUID = route.query.data
let zhi = ref({})
const xinxilai = ref('')
zhi.value = JSON.parse(YOUID)
let youIDDDD = ref('')
youIDDDD.value = zhi.value.userId
let arrlist1 = ref([])
xuan()
async function xuan() {
    let res = await getPrivateLetter({
        userId: zhi.value.userId,
        meId: uid
    })
    arrlist1.value = res.data.data
}
let time = new Date()
async function fachu() {
    let obj = {
        fromId: uid,
        toId: youIDDDD,
        privateLetterContent: xinxilai.value,
        createdAt: time,
        userAvatar: '/assets/avatar/1203c37e-bb58-48e3-811a-be0081a0f873.png',
        userNickname: '美'
    }
    console.log(xinxilai.value);
    let res = await privateLetter({
        content: xinxilai.value,
        fromUserId: uid,
        toUserId: youIDDDD.value
    })
    socket.emit('sendPrivateLetter', obj)
    xinxilai.value = ''
    xuan()
}
socket.on('receivePrivateLetter', data => {
    arrlist1.value.push(data)
})
const scrollContainer = ref(null)
let scrollToBottom = function () {
    scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
}
onMounted(() => {
    scrollToBottom()
})
onUpdated(() => {
    scrollToBottom()
})
</script>
<style lang="scss" scoped>
.my-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #e8e8e9;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    z-index: 33;
    border-bottom: 0.5px solid rgba(41, 40, 37, 0.8);
    background: #161622;

    .back-wrap {
        position: absolute;
        left: 10px;

        .icon-left {
            padding: 10px;
        }
    }

}

.input-bar {
    position: fixed;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 44px;
    position: absolute;
    bottom: 0;
    background: #161622;
    border-top: 1px solid rgba(41, 40, 37, 0.8);

}

.input-bar .input {
    background: #161622;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 14px;
    color: #e8e8e9;
    padding-left: 10px;
    caret-color: #face15;

}

.input-bar .iconfont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 44px;

}

.scroll-warp-bottom {
    margin-bottom: 44px;

}

.scroll-wrap {
    position: fixed;
    background: #161622;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin-top: 44px;
    overflow: scroll;
    margin-bottom: 40px;

}

.chat-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

}

.right {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-left: 100px;
}

.content {
    position: relative;
    border-radius: 5px;
    background: #fff;
    color: #000;
    padding: 10px;
    word-break: break-all;
    font-size: 16px;
}

.avatar {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-radius: 50%;
    margin: 0 15px;
}

.left {
    margin-right: 100px;
}

.chat-item .right .content:after {
    display: block;
    position: absolute;
    top: 8px;
    right: -16px;
    border: 8px solid transparent;
    border-left: 8px solid #fff;
    content: '';
}

.chat-item .left .content:after {
    display: block;
    position: absolute;
    top: 8px;
    left: -16px;
    border: 8px solid transparent;
    border-right: 8px solid #fff;
    content: '';
}

.time {
    font-size: 10px;
    margin-top: 10px;
}

.chat-item .left {
    margin-right: 100px;
}

.chat-item>div {
    box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 20px 0;
    align-items: center;
}

.chat-item .content {
    position: relative;
    border-radius: 5px;
    background: #fff;
    color: #000;
    padding: 10px;
    word-break: break-all;

}
</style>
